<template>
  <div class="skeleton-small">
    <div class="head">
      <div class="title"></div>
      <div class="desc"></div>
      <div class="more"></div>
    </div>
    <div class="body">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <span class="shan"></span>
  </div>
</template>

<script>
export default {
  name: 'skeleton-small'
}
</script>

<style scoped lang='less'>
@bg: #efefef;
.skeleton-small {
  width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  .head {
    display: flex;
    padding: 30px 0;
    align-items: baseline;
    .title {
      width: 140px;
      height: 50px;
      background: @bg;
      border-radius: 4px;
    }
    .desc {
      width: 150px;
      height: 30px;
      background: @bg;
      border-radius: 4px;
      margin-left: 30px;
    }
    .more {
      width: 100px;
      height: 30px;
      background: @bg;
      border-radius: 4px;
      margin-left: 820px;
    }
  }
  .body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .box {
      height: 306px;
      width: 306px;
      background: #ddd;
      border-radius: 4px;
    }
  }
}

@import "../styles/_mixins.less";

.shanshan();
</style>
